<template>
  <div class="login_container">
    <div class="login_box">
      <div style="margin-bottom: 20px;margin-top: 20px;text-align: center">欢迎使用后台管理系统</div>
      <el-form
          ref="ruleFormRef"
          style="width: 100%"
          :model="data.ruleFrom"
          :rules="data.rules"

      >
        <el-form-item  style="padding-left:10px;padding-right: 10px" prop="userName">
          <el-input placeholder="请输入账号" v-modle="data.ruleFrom.userName" prefix-icon="User" />
        </el-form-item>
        <el-form-item style="padding-left:10px;padding-right: 10px" prop="password">
          <el-input placeholder="请输入密码" v-modle="data.ruleFrom.password" prefix-icon="Lock"/>
        </el-form-item>
        <div style="display: flex;justify-content: center;padding-bottom: 20px;margin-left: 10px;margin-right: 10px">
          <el-button type="primary" style="width: 100%" @click="doLogin">登录</el-button>
        </div>
      </el-form>
    </div>

    <RouterLink to="/home">跳转首页</RouterLink>

  </div>
</template>

<script setup>
import {reactive, ref} from "vue";
import {useRouter} from "vue-router";

const router = useRouter()

const ruleFormRef=ref()

const data=reactive({
  ruleFrom:{
    userName:"",
    password:"",
  },
  rules:{
    userName:[
      {required:true,message:"请输入账号",trigger:"blur"},
      {min:3,message: "不能少于三位",trigger:"blur"}
    ],
    password:[
      {required:true,message:"请输入密码",trigger:"blur"},
      {min:6,message: "不能少于六位",trigger:"blur"}
    ]
  }
})
const doLogin=()=>{
  alert("执行到后台");
  router.push("/manager")
}

</script>

<style scoped>
.login_container {
  background-image:url("https://www.cqytxy.edu.cn/images/banner001.jpg") ;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: center;
}

.login_box {
  width: 50%;
  height: auto;
  position: absolute;
  left: 200px;
  top: 100px;
  justify-content: center;
  align-items: center;
  background: palegoldenrod;
}
</style>
<script lang="ts">
</script>